<template>
    <view class="container">
        <view class="tabs">
            <u-tabs
                :list="tabsList"
                :active-color="$setting.colorTheme()"
                :is-scroll="false"
                :current="tabsCurrent"
                @change="tabsChange"
            ></u-tabs>
        </view>
        <view class="tabs-placeholder"></view>

        <view class="list">
            <view
                class="item flex-align-center bg-fff"
                v-for="(item, index) in list"
                :key="index"
            >
                <view class="item-price flex-column-center">
                    <view class="item-price-content">
                        <view v-if="item.coupon_type.value === 20">{{ item.discount }}折</view>
                        <view v-else><text>￥</text>{{ dealWithPrice(item.reduce_price) }}</view>
                    </view>
                    <view class="item-price-tips">
                        {{ dealWithText(item) }}
                    </view>
                </view>

                <view class="item-line flex-column-center">
                    <view class="item-line-top"></view>
                    <view class="item-line-dashed"></view>
                    <view class="item-line-bottom"></view>
                </view>

                <view class="item-con flex-column-space-between">
                    <view class="item-con-top">
                        <view class="item-title flex-space-between">
                            <view class="item-name">{{ item.name }}</view>
                            <b-u-button-theme
                                width="144rpx"
                                height="48rpx"
                                size="24rpx"
                                @click="
                                    jumpSwitch(item.is_single, item.product_id)
                                "
                                v-if="tabsCurrent == 0"
                                >去使用</b-u-button-theme
                            >
                            <b-u-button-grey
                                width="144rpx"
                                height="48rpx"
                                size="24rpx"
                                v-if="tabsCurrent == 1"
                            >
                                已使用
                            </b-u-button-grey>
                            <b-u-button-grey
                                width="144rpx"
                                height="48rpx"
                                size="24rpx"
                                v-if="tabsCurrent == 2"
                            >
                                已失效
                            </b-u-button-grey>
                        </view>
                    </view>
                    <view style="flex: 1">
                        <view class="item-time">
                            {{ item.start_time.text }}-{{ item.end_time.text }}
                            <view class="use-type">
                                <view class="use-type-item">
                                    1、{{ item.supplier_range_text }}
                                </view>
                                <view class="use-type-item">
                                    2、{{ item.apply_range_text }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view
            v-if="list.length == 0 && loadmoreStatus == 'nomore'"
            style="padding-top: 100rpx"
        >
            <u-empty text="暂无数据" mode="data"></u-empty>
        </view>
        <view v-else>
            <b-u-loadmore :status="loadmoreStatus"></b-u-loadmore>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabsList: [
                {
                    name: '未使用',
                    id: 'not_use',
                },
                {
                    name: '已使用',
                    id: 'is_use',
                },
                {
                    name: '已失效',
                    id: 'is_expire',
                },
            ],
            tabsCurrent: 0,
            list: [],
            pageForm: {
                data_type: 'not_use',
                page: 1,
                list_rows: 10,
            },
            loadmoreStatus: 'nomore',
        };
    },
    onLoad(options) {},
    onShow() {
        this.getHttp();
    },
    onReachBottom() {
        if (this.loadmoreStatus == 'nomore') {
            return;
        }
        this.pageForm.page++;
        this.getCoupon();
    },
    methods: {
        dealWithText(item){
            const { min_price } = item
            if (min_price !== '0.00') {
                const arr = min_price.split('.')
                const text = arr[1] === '00' ? arr[0] : min_price
                return `满${ text }可用`
            } else {
                return '无门槛'
            }
        },
        dealWithPrice(price) {
			const arr = price.split('.')
			const curPriceText = arr[1] === '00' ? arr[0] : price
			return curPriceText
		},
        jumpSwitch(is_single, product_id) {
            if (is_single == 1) {
                uni.navigateTo({
                    url: '/pages/categoty/product/product?id=' + product_id,
                });
            } else {
                uni.switchTab({
                    url: '/pages/categoty/categoty',
                });
            }
        },
        tabsChange(e) {
            this.tabsCurrent = e;
            this.pageForm.data_type = this.tabsList[e].id;
            this.pageForm.page = 1;
            this.list = [];
            this.getCoupon();
        },
        getCoupon() {
            this.loadmoreStatus = 'loading';
            uni.$u.api.getCoupon(this.pageForm).then((res) => {
                this.list = res.list;
                // this.list = this.list.concat(res.list);
                // this.loadmoreStatus = 'loadmore';
                // if(this.list.length  == res.list.total) {
                this.loadmoreStatus = 'nomore';
                // }
            });
        },
        getHttp() {
            this.pageForm.page = 1;
            this.list = [];
            this.getCoupon();
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    .tabs {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
    }

    .tabs-placeholder {
        height: 80rpx;
    }

    .list {
        padding: 30rpx;

        .item {
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            height: 218rpx;

            .item-price {
                width: 180rpx;
                height: 100%;

                .item-price-content {
                    font-size: 40rpx;
                    font-weight: bold;
                    color: $uni-color-theme;

                    text {
                        font-size: 24rpx;
                        font-weight: normal;
                    }
                }

                .item-price-tips {
                    margin-top: 10rpx;
                    font-size: 24rpx;
                    color: $uni-color-theme;
                    text-align: center;
                    padding: 0px 6rpx 0px 8rpx;
                }
            }

            .item-line {
                height: 100%;

                .item-line-top {
                    width: 0;
                    height: 0;
                    border-top: 8rpx solid #f6f6f6;
                    border-right: 8rpx solid transparent;
                    border-left: 8rpx solid transparent;
                    border-bottom: 8rpx solid transparent;
                }

                .item-line-dashed {
                    flex: 1;
                    border-right: 1px dashed rgba(232, 13, 13, 0.3);
                }

                .item-line-bottom {
                    width: 0;
                    height: 0;
                    border-top: 8rpx solid transparent;
                    border-right: 8rpx solid transparent;
                    border-left: 8rpx solid transparent;
                    border-bottom: 8rpx solid #f6f6f6;
                }
            }

            .item-con {
                flex: 1;
                height: 100%;

                .item-con-top {
                    padding: 16rpx 14rpx;

                    .item-title {
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #111111;

                        view {
                            // margin-right: 40rpx;
                        }
                    }
                }

                .item-time {
                    flex: 1;
                    padding: 15rpx 30rpx 0rpx;
                    font-size: 24rpx;
                    color: #666666;
                    border-top: 1px dashed rgba(232, 13, 13, 0.3);
                }
                .use-type {
                    margin-top: 10rpx;
                    padding: 6rpx 10rpx;
                    font-size: 18rpx;
                    color: #999999;
                    background-color: #f6f6f6;
                    border-radius: 6rpx;
                }
            }
        }
    }
}
.item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 160rpx;
}
</style>
